<template>
	<view>
		<!-- 导航栏 -->
		<musichead title='网易云音乐' :icon='false'></musichead>
		<!-- 主体 -->
		<view class="container">
			<!-- scroll区域  -->
			<scroll-view scroll-y="true">
				<!-- 搜索模块 -->
				<view class="index-search" @tap="goSearch">
					<!-- 搜索icon -->
					<text class="iconfont">&#xe60c;</text>
					<!-- 搜索输入框 -->
					<input type="text" placeholder="搜索歌曲" />
				</view>
				<!-- 歌曲推荐模块 -->
				<!-- 遍历出想要的热歌模块 -->
				<view class="index-list" v-for="item in musicList" :key="item.id" @click="handleTolist(item.id)">
					<!-- 热歌模块主体 -->
					<view class="index-list-item">
						<!-- 热歌模块的图片区域 -->
						<view class="index-list-img">
							<!-- 图【i按位置 -->
							<image :src="item.coverImgUrl"></image>
							<!-- 什么时候更新的 -->
							<text>{{item.updateFrequency}}</text>
						</view>
						<!-- 歌曲名称列表 -->
						<view class="index-list-text">
							<view  v-for="(item , index) in item.tracks" :key="index">{{index+1}}.{{item.first}}-{{item.second}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入导航栏
	import musichead from '../../components/musichead/musichead'
	export default {
		// 注册导航栏
		components: {
			musichead
		},
		data() {
			return {
				// 热歌模块的数据数组
			musicList:[]
			}
		},
		onLoad() {
			// 调用获取热歌模块数组的方法
			this.getMusicList()
		},
		methods: {
			// 获取热歌数据
			async getMusicList() {
				// 获取热歌数据
				const {
					data: res
				} = await this.$http({
					url: '/toplist/detail?',
				})
				// 将获取到的数据前4个赋值给this.musicList
				this.musicList = res.list.slice(0,4)
				
			},
			handleTolist (listIds) {
				// 将热歌模块的id给详细页
				uni.navigateTo({
					url:'../list/list?listId='+listIds
				})
			},
			goSearch () {
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.index-search {
		display: flex;
		height: 80rpx;
		align-items: center;
		background-color: #efefef;
		border-radius: 15px;
		margin: 30rpx;
	}

	.index-search text {
		margin: 0 20rpx;
	}

	.index-search input {
		flex: 1;
	}

	.index-list {
		margin-top: 64rpx;

		.index-list-item {
			display: flex;
			margin-left: 20rpx;

			.index-list-img {
				width: 212rpx;
				height: 212rpx;
				position: relative;
				border-radius: 30rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				text {
					position: absolute;
					bottom: 5rpx;
					left: 20rpx;
					color: #fff;
					font-size: 30rpx;
				}
			}

			.index-list-text {
				flex: 1;
				display: flex;
				margin-left: 20rpx;
				flex-flow: column;
				justify-content: space-around;
			}
		}
	}
</style>
